<template>
	<view class="template">
		<view :class="'cu-modal ' + (popShow ? 'show' : '')">
			<view class="cu-dialog"
				:style="{height:`calc(100vh - 300rpx - ${CustomBar}px)`,marginTop: `calc(100rpx + ${CustomBar}px)`}">
				<view class="c_content">
					<view class="info">
						<view class="top_title">
							<image
								src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/25be1a9a-c1d7-4c09-a30a-17a85aba18e5.jpg"
								mode="" class="t_img"></image>
							<view class="">立健好物</view>
						</view>
						<view class="m_title">
							{{goodsSpu.spuShare&&goodsSpu.spuShare.info ? goodsSpu.spuShare.info : goodsSpu.name}}
						</view>
						<view v-if="goodsSpu.picUrls&& goodsSpu.picUrls.length">
							<image v-if="goodsSpu.spuShare&&goodsSpu.spuShare.imgUrl " :src="goodsSpu.spuShare.imgUrl" class="image-box"></image>
							<image v-else :src="goodsSpu.picUrls[0]" class="image-box"></image>
						</view>
						<view class="bottom_title">
							<image
								src="https://fs-mix.oss-cn-beijing.aliyuncs.com/1/material/23a86be5-848f-402c-859d-ab43e8d8ae00.png"
								mode="" class="b_img"></image>
							<view class="">小程序</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white solid-top show-btn" style="height: 10%;">
					<view class="action margin-0 flex-sub" @click="popShow=false">取消</view>
					<view class="action margin-0 flex-sub solid-left text-bold">
						<button class=" s_btn" open-type="share" @click="popShow=false">分享</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from 'utils/api'

	export default {
		name: 'create-share-video',
		data() {
			return {
				popShow: false
			}
		},
		props: {
			goodsSpu: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			shareUrlVideo() {
				console.log(this.goodsSpu, 123123)
				uni.setStorageSync('share_video_good', {
					title: this.goodsSpu.spuShare&&this.goodsSpu.spuShare.info ? this.goodsSpu.spuShare.info : this.goodsSpu.name,
					imageUrl: this.goodsSpu.spuShare&&this.goodsSpu.spuShare.imgUrl ? this.goodsSpu.spuShare.imgUrl : this.goodsSpu.picUrls && this.goodsSpu.picUrls.length ? this.goodsSpu.picUrls[0] : null,
					spuId: this.goodsSpu.id
				})
				const userInfo = uni.getStorageSync('user_info');
				if (userInfo.enable != '1') {
					uni.showModal({
						title: '提示',
						content: '用户不是正常状态，无法进行分享，请联系运营',
						showCancel: false,
						success(res) {}
					});
					return
				}
				this.popShow = true
				// const sku = this.goodsSpu.skus[0]
				// api.shareInfo({
				// 	skuId: sku.id,
				// 	userId: userInfo.id
				// }).then(res => {
				// 	let shareId = res.data.id

				// })
			},
		}
	}
</script>

<style scoped>
	.cu-dialog {
		width: auto;
	}

	.c_content {
		padding: 40rpx 60rpx;
	}

	.c_content .info {
		background-color: #fff;
		padding: 20rpx 40rpx;
	}

	.top_title {
		display: flex;
		color: #C2C2C2;
		margin: 10rpx 0;
	}

	.top_title .t_img {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.m_title {
		color: #333;
		text-align: left;
		margin: 10rpx 0 20rpx;
		width: 375rpx;
	}

	.image-box {
		width: 375rpx;
		height: 300rpx;
	}

	.bottom_title {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #C2C2C2;
		margin-top: 10rpx;
	}

	.bottom_title .b_img {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.s_btn {
		background-color: #fff;
		font-size: 30rpx;
		padding: 0;
		color: #e54d42;
		width: 100%;
	}

	.s_btn::after {
		border: none !important;
	}
</style>